<template>
  <PageContainer>
    <Header title="授权信息" />
    <view class="hb-p-4">
      <TmText
        _class="hb-font-bold hb-mb-3"
        label="检测到您已有下方账号信息可进行授权："
        :font-size="36"
      />
      <TmText
        _class="hb-mb-3"
        label="授权后将会以该账号个人/会员信息智能生成您的AI智能助手"
        color="#646566"
        :font-size="24"
      />
      <TmText
        _class="hb-mb-3"
        label="查看授权信息详情"
        color="#2878FF"
        :font-size="24"
        @click="handleAuthDetail"
      />
      <template v-for="item in authorizedUserListData" :key="item.memberLeadingId">
        <view
          class="hb-mb-3 hb-p-3 hb-box-shadow-base hb-bg-white hb-flex hb-items-center hb-rounded-lg"
          @click="handleSelect(item.memberLeadingId)"
        >
          <CustomRadio class="hb-flex-shrink-0" :checked="selected === item.memberLeadingId" />
          <view class="hb-flex-1 hb-ml-3">
            <view class="hb-flex hb-items-center hb-mb-2">
              <TmImage
                class="hb-flex-shrink-0 hb-mr-2"
                :src="item.avatar || ''"
                :width="48"
                :height="48"
                :round="25"
              />
              <TmText
                _class="hb-font-bold text-overflow-1"
                :label="item.memberLeadingName"
                :font-size="32"
              />
            </view>
            <view class="hb-flex hb-items-center hb-mb-2">
              <TmText
                _class="hb-font-bold text-overflow-1"
                :label="item.orgName"
                color="#666664"
                :font-size="24"
              />
              <RoleTag
                v-if="item.levelName"
                class="hb-ml-2"
                type="superAdmin"
                :text="item.levelName"
              />
            </view>
            <view v-if="item.companyName" class="hb-flex hb-items-center hb-mb-2">
              <TmText
                _class="hb-font-bold text-overflow-1"
                :label="item.companyName"
                color="#666664"
                :font-size="24"
              />
              <RoleTag
                v-if="item.socialPosition"
                class="hb-ml-2"
                type="member"
                :text="item.socialPosition"
              />
            </view>
          </view>
        </view>
      </template>
      <Empty v-if="authorizedUserListData.length === 0" />
      <view class="hb-h-18"></view>

      <view class="hb-fixed hb-bottom-0 hb-left-0 hb-w-full hb-px-4 hb-py-3 hb-bg-white">
        <TmButton
          :loading="loading"
          label="授权并创建"
          form-type="submit"
          :font-size="32"
          :round="16"
          :disabled="!selected"
          block
          :height="88"
          @click="handleAuthCreate"
        />
      </view>
      <TmModal
        v-model:show="showAuthDetail"
        title="授权信息详情"
        okText="知道了"
        :hideCancel="true"
        :height="620"
      >
        <view>
          <view class="hb-mb-4">
            <TmText
              label="同意授权将把您选中的会员个人名片部分信息授予AI小邦，用于帮您创建生成AI智能助手（后续可自由修改）。"
              :font-size="28"
            />
          </view>
          <view class="hb-mb-4 hb-flex">
            <TmText label="授权信息内容：" :font-size="28" _class="hb-font-bold" />
          </view>
          <view class="hb-mb-4">
            <text class="hb-font-bold hb-text-sm">个人名片信息：</text>
            <text class="hb-text-sm">姓名、手机号、微信号、邮箱、个人简介；</text>
          </view>
          <view class="hb-mb-4">
            <text class="hb-font-bold hb-text-sm">主单位信息：</text>
            <text class="hb-text-sm">单位名称、单位logo、单位职务、单位简介、地址、主营业务；</text>
          </view>
        </view>
      </TmModal>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* aiAuthCreate 智能体授权创建 */
  import { aiAuthorizedAdd, authorizedUserList } from '@/api/aiSettings';
  import { AuthorizedUserListResult } from '@/api/aiSettings/types';
  import { TabbarPageEnum } from '@/enums/PageEnum';
  import { useUserStore } from '@/store/modules/user';

  const selected = ref<number>(0);
  const handleSelect = (index: number) => {
    selected.value = index;
  };

  const authorizedUserListData = ref<AuthorizedUserListResult[]>([]);
  authorizedUserList().then((res) => {
    if (res.length) {
      selected.value = res[0].memberLeadingId;
    }
    authorizedUserListData.value = res;
  });

  /** 回到首页 */
  const handleBack = () => {
    switchTab(TabbarPageEnum.BASE_HOME);
  };

  /** 跳转高级设置 */
  const handleSuccess = () => {
    reLaunch({
      name: 'aiAdvancedSettings',
    });
  };

  const loading = ref<boolean>(false);
  /** 授权并创建 */
  const handleAuthCreate = () => {
    loading.value = true;
    aiAuthorizedAdd({ memberLeadingId: selected.value })
      .then(() => {
        useUserStore().getUserInfo();
        uni.showModal({
          title: '智能助手创建成功！',
          content: '恭喜创建智能助手成功！您还可以继续完善智能助手更多信息，是否要前往设置？',
          cancelColor: '#969799',
          cancelText: '回到首页',
          confirmColor: '#2878FF',
          confirmText: '高级设置',
          success: (res) => {
            if (res.confirm) {
              handleSuccess();
            } else {
              handleBack();
            }
          },
        });
      })
      .finally(() => {
        loading.value = false;
      });
  };
  const showAuthDetail = ref<boolean>(false);
  const handleAuthDetail = () => {
    showAuthDetail.value = true;
  };
</script>

<style lang="scss" scoped></style>
